<!--
 * @FilePath     : /layui/demo/1582.html
 * @Description  : 日期多选
 * @Date         : 2025-02-25 10:33
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-25 10:42
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />

    <style>
      /* css调整部分 */
      xm-select .scroll-body {
        margin-top: -5px;
      }
      xm-select .xm-body {
        padding: 0;
        border: none;
        background-color: usnet;
        box-shadow: none;
      }
    </style>
  </head>
  <body>
    <div id="demo1" style="width: 274px"></div>

    <script src="/layui/dist/layui.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      /*
      1、先将下拉选渲染到 #demo;
      此时自定义内容为 <div id="laydate" />, 这个容器用来渲染 layui 日期选择；
      */
      var demo1 = xmSelect.render({
        el: '#demo1',
        content: '<div id="laydate" />',
        height: 'auto', // 自动高度（选了多个日期后）
        autoRow: true, // 自动换行（选了多个日期后）
        on: function (data) {
          if (!data.isAdd) {
            dateSelect(demo1.getValue('value'))
          }
        },
      })

      /*
      2、渲染日期选择；
      在上面的 #laydate 中渲染日期选择；
      */
      layui.laydate.render({
        elem: '#laydate',
        position: 'static',
        showBottom: false,
        format: 'yyyy-M-dd',
        // 3、日期变更时，更新
        change: function () {
          dateSelect(demo1.getValue('value'))
        },
        done: function (value) {
          console.log(value)
          var values = demo1.getValue('value')
          var index = values.findIndex(function (val) {
            return val === value
          })

          if (index != -1) {
            values.splice(index, 1)
          } else {
            values.push(value)
          }

          dateSelect(values)

          demo1.update({
            data: values.map(function (val) {
              return {
                name: val,
                value: val,
                selected: true,
              }
            }),
          })
        },
        ready: removeAll,
      })

      function removeAll() {
        document.querySelectorAll('#laydate td[lay-ymd].layui-this').forEach(function (dom) {
          dom.classList.remove('layui-this')
        })
      }

      // 去掉 日期选择中的 当前日期选中
      function dateSelect(values) {
        removeAll()
        values.forEach(function (val) {
          var dom = document.querySelector(
            '#laydate td[lay-ymd="' + val.replace(/-0([1-9])/g, '-$1') + '"]'
          )
          dom && dom.classList.add('layui-this')
        })
      }

      //这里仅仅提供一个演示, 更多的想法由你自己来创造
    </script>
  </body>
</html>
